<template>
  <label @click.stop>
    <el-switch v-model="valueModel" :active-value="!reverse" :inactive-value="reverse"
               active-color="#13ce66" inactive-color="#ff4949" @change="onchange"/>
  </label>
</template>

<script setup lang="ts">
import {ModifiedMethod} from "@/widget/types.js";
import {useValueModel, useValidator, UseValueModel} from "@/widget/data-table/use-value-model";

/**
 * 行内开关
 *
 * 使用这个组件需要注意：启用是 false，禁用是 true，状态是相反的，
 * 因为多数情况下，数据库是字段名是 is_disabled 而不是 enabled。
 */

interface Props extends /* @vue-ignore */ UseDictionary, /* @vue-ignore */ UseValueModel {
    // 字段名
    property: string
    // 行级数据
    row: Record<string, any>
    // 默认值（单向输入，需要通过 change 事件侦听变化）
    value?: boolean | number | string
    // 数据变化事件
    change?: ModifiedMethod

    // 文字提示
    placeholder?: string
    // 是否反转逻辑（默认 false）
    reverse?: boolean
}

// 设置默认值
const props = withDefaults(defineProps<Props>(), {
    value: false,
    placeholder: '请选择',
    reverse: false
})

const {valueModel, onchange} = useValueModel(props);

const {validation} = useValidator(props);
</script>